<template>
	<view class="padding">
		<view class="team-head-info">
			<view class="col">
				<view class="b">0</view>
				<text>团队总人数</text>
			</view>
			<view class="col">
				<view class="b">0.00</view>
				<p>团队总充值</p>
			</view>
			<view class="col">
				<view class="b">0.00</view>
				<p>团队总提现</p>
			</view>
			<view class="col">
				<view class="b">0.00</view>
				<p>团队总投资</p>
			</view>
			<view class="col">
				<view class="b">0.00</view>
				<p>团队待返本金</p>
			</view>
			<view class="col">
				<view class="b">0</view>
				<p>直荐总人数</p>
			</view>
			<view class="ckgd" :data_zt="0">
				<p @click="toggleUpgradeProgress">查看升级团长进度<i class="ew-tree-icon layui-icon layui-icon-triangle-d"></i>
				</p>
			</view>
			<view class="cksjtj" v-show="showUpgradeProgress">
				<view class="css_tdbox">
					<view class="row tdbox-bet">
						<view class="left">满足下列条件，即可升级为【一星团队长】</view>
					</view>
					<view class="row tdbox-bet">
						<view class="left">自身实名：</view>
						<view class="right">{{ selfRealNameStatus }}</view>
					</view>
					<view class="row tdbox-bet">
						<view class="left">自身投资：</view>
						<view class="right">{{ selfInvestment }}</view>
					</view>
					<view class="row tdbox-bet">
						<view class="left">直荐有效人数：</view>
						<view class="right">{{ directReferrals }}</view>
					</view>
					<view class="row tdbox-bet">
						<view class="left">总团队有效人数：</view>
						<view class="right">{{ totalTeamMembers }}</view>
					</view>
					<view class="row tdbox-bet">
						<view class="left">团队总投资：</view>
						<view class="right">{{ totalTeamInvestment }}</view>
					</view>
					<view class="tuanzhang-jindu-box">
						<view class="progress-bar-txt tdbox-bet">
							<span>距离升级完成进度:</span>
							<b>{{ upgradeProgress }}</b>
						</view>
						<view class="progress-bar">
							<view class="slider" :style="{ width: upgradeProgress }"></view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="ew-tree-table-box">
			<view class="layui-table">
				<view style="width: 15rem;text-align: left;padding-left: 0.3rem;" class="tree-table-cell">
					推广账号
				</view>
				<view style="width: 25.00%" class="tree-table-cell">
					姓名
				</view>
				<view style="width: 25.00%" class="tree-table-cell">
					累计充值
				</view>
				<view style="width: 25.00%" class="tree-table-cell">
					累计提现
				</view>
				<view style="width: 25.00%" class="tree-table-cell">
					累计投资
				</view>
				<view style="width: 25.00%" class="tree-table-cell">
					在线状态
				</view>
			</view>

		</view>
		<view class="no-data-tips fc-h" style="">
			<image src="../../../static/img/team/no-data.png" alt=""></image>
			<text>暂无记录</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showUpgradeProgress: false,
				showUpgradeInfo: false, // Set to true to show upgrade info
				selfRealNameStatus: '未实名', // Replace with actual value
				selfInvestment: '0.00/5000.00', // Replace with actual value
				directReferrals: '0/5', // Replace with actual value
				totalTeamMembers: '0/20', // Replace with actual value
				totalTeamInvestment: '0/200000.00', // Replace with actual value
				upgradeProgress: '10.00%', // Replace with actual value
			};
		},
		methods: {
			toggleUpgradeProgress() {
				this.showUpgradeProgress = !this.showUpgradeProgress;
			},
		},
	};
</script>

<style>
	.tuanzhang-jindu-box .progress-bar .slider {
	    width: 100%;
	    height: 0.5rem;
	    background: #338BF4;
	    border-radius: 0.1rem;
	}
	.team-head-info {
		height: auto;
		border-radius: 0.28rem;
		margin-bottom: 0rem;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-wrap: wrap;
		align-content: center;
	}

	.team-head-info .col {
		width: 33%;
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 2.4rem;
	}

	.ew-tree-table-box {
		overflow: auto;
		position: relative;

	}

	.layui-table {
		margin: 0;
		min-width: 657px;
		width: 100%;
		position: pos;
		table-layout: fixed;
	}

	.layui-table {
		width: 100%;
		display: flex;

		align-items: center;
		background-color: #0b6fc0 !important;
		color: #fff;
	}

	.layui-table,
	.layui-table-view {
		margin: 10px 0;
	}

	.tree-table-cell {
		height: 1.5rem;
		border-width: 1px;
		border-style: solid;
		line-height: 1.5rem;
		text-align: center;
		border-color: #e6e6e6
	}

	.ckgd {
		display: inline-block;
		width: 100%;
		padding-top: 0.5rem;
	}

	.css_tdbox {
		padding: 0.5rem 0.56rem 0.2rem 0.56rem;
		font-size: 0.48rem;
		font-family: PingFang;
		font-weight: 600;
		color: #fff;
		line-height: 0.92rem;
		letter-spacing: 0px;
		text-align: center;
		vertical-align: top;
	}

	.cksjtj {
		display: inline-block;
		width: 100%;
		padding-top: 0.5rem;
	}

	.css_tdbox .tdbox-bet {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	/* Add your CSS styles here */
</style>